<template>
  <!-- 替换件选择、查看 -->
  <div>
    <TopFilter :list="topFilterList" :cols="3" :collapse="false" @filterChange="hanleSearch"></TopFilter>
    <FilterTable
      ref="table"
      columnsRef="partPartInfoManagePartInfoReplacePartSelect"
      :fetchapi="fetchApi"
      :params="fetchParams"
      :datakey="'rows'"
      :columns="columns"
      :onColumnsChange="columns => (this.columns = columns)"
      height="auto"
      maxHeight="350"
      :onRowSelectChange="handleTableSelect"
      :onEnterEvent="handleTableEnter"
      selectionType="single"
    ></FilterTable>
    <div class="bottomBtnWrap">
      <el-button @click="close">取 消</el-button>
      <el-button v-if="!partNo" type="primary" @click="handleConfirm">确 定</el-button>
    </div>
  </div>
</template>

<script>
import { queryReplacePartList } from '@/api/part/partInfoManage/partInfo';
import { queryUnitCode, queryPackUnit } from '@/api/part/partInfo';
export default {
  props: {
    partNo: String,
    optionNo: {
      type: String,
      default: ''
    }
  },
  data() {
    return {
      columns: this.createTableColumns(),
      topFilterList: this.createTopFilterList(),
      fetchApi: queryReplacePartList,
      fetchParams: { xhrAbort: true },
      unitCode: [],
      selectedRowData: {} // 选中的列表数据
    };
  },
  computed: {
    queryPartNo() {
      return this.partNo;
    }
  },
  watch: {
    queryPartNo(newVal, oldVal) {
      if (newVal) {
        this.initSearch(newVal);
      }
    }
  },
  created() {
    this.getUnit();
    if (this.partNo) {
      this.initSearch(this.partNo);
    } else {
      this.fetchParams.xhrAbort = true;
      this.fetchParams.xhrAbort = false;
    }
  },
  methods: {
    createTopFilterList() {
      return [
        {
          type: 'INPUT',
          label: '配件代码',
          fieldName: 'replacePartNo'
        },
        {
          type: 'INPUT',
          label: '配件名称',
          fieldName: 'partName'
        }
      ];
    },
    createTableColumns() {
      return [
        {
          title: '主组号',
          dataIndex: 'mainGroupNo'
        },
        {
          title: '配件代码',
          dataIndex: 'partNo'
        },
        {
          title: '替换件代码',
          dataIndex: 'optionNo'
        },
        {
          title: '拼音代码',
          dataIndex: 'spellCode'
        },
        {
          title: '配件名称',
          dataIndex: 'partName'
        },
        {
          title: '单位名称',
          dataIndex: 'unitCode',
          render: props => {
            return <span>{this.getStroageName(props.row.unitCode)}</span>;
          }
        },
        {
          title: '呆滞天数',
          dataIndex: 'sluggishDays'
        },
        {
          title: 'R3销售额',
          dataIndex: 'saleLockMark'
        }
      ];
    },
    // 初始化搜索
    initSearch(partNo) {
      this.fetchParams.xhrAbort = true;
      this.fetchParams = {
        xhrAbort: false,
        partNo: this.partNo,
        optionNo: this.optionNo
      };
    },
    // 点击搜索
    hanleSearch(e) {
      this.fetchParams.xhrAbort = true;
      this.fetchParams = Object.assign(this.fetchParams, {
        xhrAbort: false,
        ...e
      });
    },

    getStroageName(UNIT_CODE) {
      const item = this.unitCode.find(x => {
        return x.value == UNIT_CODE;
      });
      return item ? item.text : '';
    },
    async getUnit() {
      const res = await queryUnitCode();
      this.unitCode = res.data.map(x => ({ text: x.UNIT_NAME, value: x.UNIT_CODE }));
    },
    getUnitName(unit) {
      const item = this.unitCode.find(x => {
        return x.value == unit;
      });
      return item ? item.text : '';
    },
    // 选中table列表项
    handleTableSelect(e) {
      this.selectedRowData = e[0];
    },
    // 双击列表项
    handleTableEnter(e) {
      this.selectedRowData = e;
      this.handleConfirm();
      this.close();
    },
    // 点击确定按钮
    handleConfirm() {
      this.$emit('onConfirm', this.selectedRowData);
      this.close();
    },
    // 关闭提示框
    close() {
      this.$emit('close');
    }
  }
};
</script>

<style scoped>
.bottomBtnWrap {
  position: absolute;
  left: 0;
  bottom: 0;
  right: 0;
  z-index: 9;
  border-top: 1px solid #e9e9e9;
  padding: 10px 20px;
  background: #fff;
  text-align: right;
}
</style>
